<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<button>abc</button>
<script>
    data={
        operationName: "bookDetails"
    }
    data.query=`
    query bookDetails{
  bookById(id: "book-1"){
    id
    name
    pageCount
    author{
      id
      firstName
      lastName
    }
  }
}
    `
    document.querySelector("button").addEventListener("click",()=>{
        fetch("graphql",{method:"POST",body:JSON.stringify(data),headers:{'Content-Type':'application/json'}})
            .then(resp=>resp.json())
            .then(data=>console.log(data))
    })
</script>
</body>
</html>